一看就會(huì)(ui組件化意義)ui組件庫(kù)怎么用,UI設(shè)計(jì)中9個(gè)常用的控件規(guī)范,
我們?cè)谠O(shè)計(jì) UI 界面的時(shí)候,有一些控件幾乎總是會(huì)用到。用戶熟悉了它們的交互模式,也因此建立了心智模型,很清楚昆山網(wǎng)頁(yè)設(shè)計(jì)如何通過(guò)這些控件幫助他們達(dá)成目標(biāo)。
我們需要關(guān)注的輸入控件包括以下這幾個(gè):
1.按鈕 2.多選 3.單選 4.切換 5.文本輸入框 6.下拉選擇 7.列表框 8.下拉按鈕 9.滑塊
一、按鈕,按鈕向用戶隱喻昆山網(wǎng)頁(yè)設(shè)計(jì)當(dāng)他們按下/點(diǎn)擊時(shí)將觸發(fā)一個(gè)操作。
最佳規(guī)范:按鈕結(jié)構(gòu),當(dāng)我們?cè)O(shè)計(jì)一個(gè)按鈕時(shí),我們需要考慮多個(gè)組成要素:圓角、內(nèi)間距、投影(可能有)、填充(純色或漸變)、文字。所有這些要素組成在一起形成一個(gè)有效傳達(dá)的按昆山網(wǎng)頁(yè)設(shè)計(jì)鈕控件,向用戶發(fā)生正確的交互信息。
二、復(fù)選框,復(fù)選框控件是指用戶可以在一個(gè)列表中能同時(shí)選擇多個(gè)選項(xiàng)。
最佳規(guī)范:當(dāng)你在復(fù)選控件中有非常多的選項(xiàng)時(shí),給這些選項(xiàng)分組是一個(gè)很好的分類方法。雖然可能已經(jīng)為用戶創(chuàng)昆山網(wǎng)頁(yè)設(shè)計(jì)建了復(fù)選框時(shí)勾選多個(gè)選項(xiàng)的模式,但選項(xiàng)題目上準(zhǔn)確顯示可多選對(duì)用戶的實(shí)際選擇也很有用。比如舉個(gè)例子,在一個(gè)復(fù)選題中,如果我們問(wèn)“你喜歡哪些書?”而不問(wèn)“你喜歡哪本書?”,得到的答案很可能是完全不同的,這昆山網(wǎng)頁(yè)設(shè)計(jì)
三、單選按鈕,復(fù)選框是告訴用戶這個(gè)列表中有多個(gè)選項(xiàng)可以選擇,而單選按鈕則告訴用戶只能選擇一個(gè)選項(xiàng)。
最佳規(guī)范:類似于復(fù)選框昆山網(wǎng)頁(yè)設(shè)計(jì),如果你有一個(gè)長(zhǎng)長(zhǎng)的選項(xiàng)列表的話,記得把它們進(jìn)行分組,這樣讓用戶更容易選擇。昆山網(wǎng)頁(yè)設(shè)計(jì)用戶能夠在點(diǎn)擊這個(gè)選項(xiàng)標(biāo)簽時(shí)就能選中(擴(kuò)大點(diǎn)擊范圍)。
四、切換控件,通常被用在開關(guān)選項(xiàng)中,讓用戶可以輕松地選擇這 2 個(gè)選項(xiàng)。
最佳規(guī)范:切換按鈕一般都有一個(gè)默認(rèn)值。用戶可以決定是否需要改變切換狀態(tài)。當(dāng)昆山網(wǎng)頁(yè)設(shè)計(jì)用戶與切換按鈕交互時(shí),對(duì)于結(jié)果的影響應(yīng)該是立即生效的,而不必點(diǎn)擊保存。
五、輸入框,簡(jiǎn)單說(shuō),輸入框就是讓用戶能夠輸入文字。雖然設(shè)計(jì)樣式可能不同,但它們都應(yīng)該顯示一個(gè)標(biāo)簽。
最佳規(guī)范:始終顯示標(biāo)簽,這樣用戶昆山網(wǎng)頁(yè)設(shè)計(jì)昆山網(wǎng)頁(yè)設(shè)計(jì)。
六、下拉列表,類似于單選按鈕,下拉列表僅允許用戶在同一個(gè)時(shí)間只能選擇一個(gè)選項(xiàng)。事實(shí)上,它們是可擴(kuò)展的,本質(zhì)上就是一個(gè)緊湊型的單選按鈕。
最佳規(guī)范:因?yàn)樗鼈儽举|(zhì)上是一個(gè)緊湊型的單選按鈕,所以當(dāng)不是真正必昆山網(wǎng)頁(yè)設(shè)計(jì)要的時(shí)候,展開選擇或許更快,盡量避免使用。
七、下拉復(fù)選框,類似于復(fù)選框,它也允許用戶同時(shí)選擇多個(gè)選項(xiàng)。
最佳規(guī)范:如果你有一個(gè)長(zhǎng)的列表選項(xiàng),記得給它們分組便于用戶更容易選擇。
八、下拉按鈕,本質(zhì)上,下拉按昆山網(wǎng)頁(yè)設(shè)計(jì)鈕是由一個(gè)按鈕組成,當(dāng)單擊下拉按鈕時(shí),將顯示不同的列表內(nèi)容。
最佳規(guī)范:記得給選項(xiàng)增加懸停效果,以顯示用戶可以通過(guò)單擊導(dǎo)航到另一個(gè)頁(yè)面。在按鈕的右側(cè)加上一個(gè)單獨(dú)的圖標(biāo),告訴用戶它還有隱藏的下拉菜單。
九、昆山網(wǎng)頁(yè)設(shè)計(jì)滑塊,滑塊允許用戶更改或設(shè)置一個(gè)值。
最佳規(guī)范:只在需要的時(shí)候使用滑塊,當(dāng)范圍對(duì)用戶來(lái)說(shuō)比精確值更重要的時(shí)候。注意控件點(diǎn)擊范圍,確保用戶可以更容易的選擇不同的值。
總結(jié):以上提到的這些控件,在我們?nèi)粘TO(shè)計(jì)昆山網(wǎng)頁(yè)設(shè)計(jì)工作中常常會(huì)被用到,希望你能了解這些正確使用的規(guī)范和指導(dǎo)原則,以便為用戶帶來(lái)最大價(jià)值。